<template>
  <div class="scroll">
    <el-breadcrumb class="ml-10px mt-40px" separator="/">
      <el-breadcrumb-item class="font-size-4" :to="{ path: '/subscribe/subscribeList' }">征订管理</el-breadcrumb-item>
      <el-breadcrumb-item>学生管理</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 搜索 -->
    <div class="screen flex mt-20px ml-10px justify-between flex-items-end">
      <div class="flex flex-1">
        <el-row :gutter="20">
          <el-col :span="7">
            <div class="form-cell flex flex-items-center">
              <span class="font-bold pr-10px">学生名称</span>
              <el-input v-model="formInline.code" class="cell-input" placeholder="请输入学生名称" clearable />
            </div>
          </el-col>
          <el-col :span="7">
            <div class="form-cell flex flex-items-center">
              <span class="font-bold pr-10px">手机号码</span>
              <el-input v-model="formInline.code" class="cell-input" placeholder="请输入手机号码" clearable />
            </div>
          </el-col>
          <el-col :span="7">
            <div class="form-cell flex flex-items-center">
              <span class="font-bold pr-10px">学校名称</span>
              <el-cascader
                v-model="formInline.school"
                class="cell-input"
                placeholder="可输入学校关键词"
                :options="options"
                clearable
                filterable
              />
            </div>
          </el-col>
        </el-row>
      </div>
      <el-space>
        <el-button size="default" class="small-btn !border-rd-20px" color="#397dfd" plain>重置</el-button>
        <el-button size="default" class="small-btn !border-rd-20px !pl-50px !pr-50px" color="#397dfd" type="primary">
          查询
        </el-button>
      </el-space>
    </div>
    <!-- 页面 -->
    <div class="mt-40px pl-10px pr-10px pb-20px">
      <div class="operate flex mb-10px font-size-16px">
        <div class="mr-2px pt-5px pb-5px pl-20px pr-20px cursor-pointer">导出学生</div>
        <div class="pt-5px pb-5px pl-10px pr-10px cursor-pointer" @click="handleBulkDelete">批量删除</div>
      </div>
      <el-table ref="multipleTableRef" :data="tableData" style="width: 100%" @selection-change="handleSelectionChange">
        <el-table-column type="selection" />
        <el-table-column prop="name" label="学生姓名" align="center" />
        <el-table-column prop="sex" align="center" label="性别">
          <template #default="scope">{{ scope.row.sex === 1 ? '男' : '女' }}</template>
        </el-table-column>
        <el-table-column property="phone" align="center" label="手机号码" />
        <el-table-column property="school" align="center" label="所属学校" />
        <el-table-column property="grand" align="center" label="年级班级" />
        <el-table-column property="date" align="center" label="添加时间" />
        <el-table-column label="操作" align="center">
          <el-space>
            <el-button
              size="small"
              class="small-btn !border-rd-20px"
              color="#397dfd"
              type="primary"
              @click="handleStudnet"
            >
              查看详情
            </el-button>
            <!-- <div class="search-btn small-btn">查看详情</div> -->
            <el-popconfirm
              teleported
              width="200"
              title="是否要删除该学生？"
              confirm-button-text="是"
              cancel-button-text="否"
            >
              <template #reference>
                <el-icon size="24" color="#3B82FD" class="cursor-pointer"><Delete /></el-icon>
              </template>
            </el-popconfirm>
          </el-space>
        </el-table-column>
      </el-table>
      <div class="flex justify-center pt-60px">
        <el-pagination
          v-model:current-page="currentPage"
          :page-sizes="[10, 20, 30, 40]"
          background
          layout="sizes, prev, pager, next"
          :total="1000"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </div>
    <!-- 查看学生详情 -->
    <el-dialog v-model="dialogVisible" class="!border-rd-10px" title="学生详情" width="500px">
      <div>查看学生详情</div>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { reactive, ref } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
const formInline = reactive({
  code: '',
  school: '',
  type: '',
  status: '',
  chooseDate: 1,
  date: ''
})
const options = reactive([
  {
    value: 'Option1',
    label: 'Option1'
  },
  {
    value: 'Option2',
    label: 'Option2'
  },
  {
    value: 'Option3',
    label: 'Option3'
  },
  {
    value: 'Option4',
    label: 'Option4'
  },
  {
    value: 'Option5',
    label: 'Option5'
  }
])
interface User {
  name: string
  sex: string
  phone: string
  school: string
  grand: string
  date: string
}
const tableData: User[] = [
  {
    name: 'Tom',
    sex: 1,
    phone: '123456789',
    school: '学校1',
    grand: '一年级1班',
    date: '2016-05-03'
  },
  {
    name: 'Tom',
    sex: 1,
    phone: '123456789',
    school: '学校1',
    grand: '一年级1班',
    date: '2016-05-03'
  },
  {
    name: 'Tom',
    sex: 1,
    phone: '123456789',
    school: '学校1',
    grand: '一年级1班',
    date: '2016-05-03'
  },
  {
    name: 'Tom',
    sex: 1,
    phone: '123456789',
    school: '学校1',
    grand: '一年级1班',
    date: '2016-05-03'
  }
]
const currentPage = ref(5)
const handleSizeChange = (val: number) => {
  // console.log(`${val} items per page`)
}
const handleCurrentChange = (val: number) => {
  // console.log(`current page: ${val}`)
}
const multipleSelection = ref([])
const handleSelectionChange = (val) => {
  multipleSelection.value = val
}
const handleBulkDelete = () => {
  if (multipleSelection.value.length === 0) {
    ElMessage.warning('请选择要删除的学生')
  } else {
    ElMessageBox.alert('是否要批量删除这些学生?', '提示', {
      confirmButtonText: '确定',
      showCancelButton: true,
      cancelButtonText: '取消',
      buttonSize: 'small',
      callback: (action: Action) => {}
    })
  }
}
const dialogVisible = ref(false)
const handleStudnet = () => {
  // console.log(111)
  dialogVisible.value = true
}
</script>

<style scoped lang="scss">
:deep(.el-input__wrapper) {
  box-shadow: none !important;
  padding: 1px 8px !important;
  border-radius: 20px;
}
:deep(.el-select__wrapper) {
  box-shadow: none !important;
  padding: 8px !important;
  border-radius: 20px;
}
:deep(.el-table--enable-row-transition .el-table__body td.el-table__cell) {
  border-bottom: none !important;
}
:deep(.el-table thead th) {
  background: #eaeaea;
}
:deep(.el-table thead th .cell) {
  font-weight: bold;
  color: #5e5e69;
  font-size: 15px;
}
:deep(.el-table) {
  border-radius: 10px;
  box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.3);
}
:deep(.el-table .cell) {
  padding: 5px 10px !important;
}
.operate {
  div {
    background: #409eff;
    color: #fff;
    font-weight: bold;
    box-shadow: 4px 0px 16px 0px rgba(0, 0, 0, 0.3);
  }
  div:first-child {
    border-radius: 30px 10px 10px 30px;
  }
  div:last-child {
    border-radius: 10px 30px 30px 10px;
  }
}
</style>
